<!-- 
CSS缺点
    - 没有变量、函数、作用域等概念
    - 需要写大量几乎毫无逻辑的代码，冗余度高，维护难
    - 没有计算能力

Less（Leaner Style Sheets）
    - leaner是更苗条的意思，大概意思是“用更少的代码，做更多的事”，简化css的编写、降低css的维护成本
    - less是css的拓展语言，也称为css预处理器（其它预处理器：sass、less、stylus）
    - less在css基础上添加了程序语言的特性，例如变量、mixin（混入）、运算、函数等功能
    - 网站
        【http://lesscss.cn/】
        【https://www.runoob.com/manual/lessguide/】
    - 插件【easy less】：将less文件编译为对应的css文件，注意设置一下存放目录位置

常用特性
    1）导入
        @import "less文件的绝对路径或相对路径"

    2）变量
        定义：
            @变量名: 值;
        调用：
            属性名: @变量名;
        命名规范：
            - 前缀@
            - 不能包含特殊字符
            - 不能以数字开头
            - 大小写敏感

    3）嵌套
        子元素直接写在父元素的css样式中
        --------------------------普通嵌套
        div { 
            width: 100px;
            a {xxx}
            .test {xxx}
        }
        --------------------------伪类、伪元素选择器的嵌套
        有&  父元素自身的伪类
        无&  父元素后代选择器子元素的伪类
        div {
            &::after{xxx}     // div::after
            ::after{xxx}      // div ::after
            a {
                &:hover{xxx}  // div a:hover
                :hover{xxx}   // div a :hover
            }
        }
        --------------------------:extend是一个伪类（继承）
        h2 {
            font-size: 12px;
            &:extend(p);
        }
        p {
            background: red;
        }
        -----结果
        h2 {
            font-size: 12px;
        }
        h2, p {
            background: red;
        }
        --------------------------

    4）运算
        - 运算符两边要有空格，否则容易出错
        - 新版的less要求：参与运算的式子必须用圆括号包括起来

        - 只有一个单位，则以该单位为准
            width: (10px + 5);        // px
            @mywidth: 2rem;
            width: ((10 - @mywidth) * 2);   // rem

        - 有两个单位，且单位不同，以第一个单位为准
            @mywidth: 2px;
            width: (10rem * @mywidth); // rem
            width: (@mywidth / 5rem);  // px

        - 十六进制表示的颜色也能参与运算
            color: (#666 - #222);

    5）函数、mixin
        - 支持所有内置函数
            calc()
            ceil()
            floor()

    6）mixin
        - mixin定义代码片段，功能近似函数
        - 但注意：mixin不是函数function
        ----------------------------- 【.代码片段名】
        .myborder(@width;@style;@color){
            border: @width @style @color;
        }
        div {
            .myborder(5px;solid;red);
        }
        ----------------------------- 【.类名】
        .p1{
            color: red;
        }
        .p2{
            background: blue;
        }
        .p3{
            .p1;
            .p2();
        }
        -----------------------------
        .test(@mywidth) {
            @w: @mywidth;
            @h: 50px;
        }
        div{
            .test(100px);
            width: @w;
            height: @h;
        }
        -----------------------------
 -->

<link rel="stylesheet" href="css/test.css" />

<div>hello,<a href="#">world</a></div>

<p>你好</p>
<section>世界</section>

<h3 class="hh3">h3</h3>
<h4 class="hh4">h4</h4>
<h5 class="hh5">h5</h5>